<template>
  <view class="my-container">
    <view
      class="my-content"
      :style="{
        paddingTop: safeAreaInsets?.top + 'px',
        backgroundImage: `url(${userInfo?.bgImg || defaultBg})`,
      }"
    >
      <view class="my-avater h-[208rpx]">
        <view class="my-avater-left">
          <view class="avater-box bg-white">
            <image
              mode="aspectFill"
              class="avater-img"
              @click="previewImage"
              :src="userInfo?.avatarUrl || '/static/images/avater.jpeg'"
            />
          </view>
          <view class="my-info">
            <view class="my-name">
              <view class="my-name-l">
                <text class="nickname">{{
                  userInfo?.nickname || "未知用户名"
                }}</text>
                <view class="admin-tag">
                  <text class="tag">#</text>
                  <text>{{ rolesMapping[userInfo?.role] || "未知角色" }}</text>
                </view>
              </view>
              <button class="edit-btn" @click="goEdit">编辑资料</button>
              <button class="logout-btn" @click="logout">退出登录</button>
            </view>
            <text class="my-desc">
              {{ userInfo?.personalizedSignature || "暂无个性签名" }}
            </text>
            <view class="membership-time">
              <text>#</text>
              入会时间：{{ userInfo?.createTime?.split(" ")[0] || "未知" }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { getWxUserDetail } from "@/service/my";
import defaultBg from "@img/my-page-text.png";
const popup = ref<any>(null);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
// 获取屏幕边界到安全区域距离
const safeAreaInsets = uni.getMenuButtonBoundingClientRect();
const rolesMapping: { [key: number]: string } = {
  1: "普通",
  2: "管理员",
  3: "超级管理员",
};

const previewImage = () => {
  // if (!userInfo?.value?.avatarUrl) return;
  uni.previewImage({
    current: 0, // 当前显示的图片
    urls: [userInfo?.value?.avatarUrl], // 预览的图片列表
  });
};
const logout = () => {
  wx.clearStorage();
  uni.navigateTo({ url: "/pages/home/index" });
};
const goEdit = () => {
  uni.navigateTo({ url: "/pages-sub/my/index" });
};
onMounted(async () => {
  if (!userInfo?.value.account) {
    return uni.navigateTo({
      url: "/pages/login/index",
    });
  }
  const res: any = await getWxUserDetail({
    id: userInfo?.value.account,
  });
  if (res.code === 200) {
    userStore.setUserInfo({
      ...userStore.userInfo,
      ...res.data,
    });
  }
});
</script>
<style scoped lang="scss">
.my-container {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  // min-height: 100vh;
  padding-bottom: 30rpx;
  background: linear-gradient(
    180deg,
    rgba(200, 255, 122, 1) 0,
    rgba(200, 255, 122, 1) 80rpx,
    rgba(205, 246, 148, 0) 462rpx
  );
}
.my-content {
  padding: 0 30rpx 0rpx 30rpx;
  text-align: left;
  background-image: url(@img/my-page-text.png);
  background-repeat: no-repeat;
  background-position: center 150rpx;
  background-size: 708rpx 214rpx;
  border-radius: 0 0 40rpx 40rpx;

  .my-avater {
    display: flex;
    align-items: center;
    margin-top: 80rpx;
    margin-bottom: 20rpx;
    .avater-box {
      position: relative;
      width: 100rpx;
      height: 100rpx;
      border: 2rpx solid rgba(255, 255, 255, 1);
      border-radius: 120rpx;
    }
    .avater-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .my-avater-left {
      position: relative;
      display: flex;
      width: 100%;
      padding: 0 8rpx 0 22rpx;
      .my-info {
        flex: 1;
        padding-left: 24rpx;
        overflow: hidden;
        .my-name {
          display: flex;
          justify-content: space-between;
          overflow: hidden;

          .my-name-l {
            display: flex;
            align-items: center;
            overflow: hidden;
          }
          .nickname {
            flex: 1;
            overflow: hidden;
            font-size: 34rpx;
            font-weight: 600;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .admin-tag {
            display: flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            width: fit-content;
            padding: 0 10rpx;
            height: 31.2rpx;
            margin-left: 6rpx;
            font-size: 13rpx;
            color: #fff;
            background: rgba(0, 0, 0, 1);
            border-radius: 136.5rpx;
            text.tag {
              width: 16rpx;
              height: 16rpx;
              margin-right: 6rpx;
              color: #fff;
              text-align: center;
              background: rgba(184, 240, 105, 1);
              border-radius: 2rpx;
            }
          }
          .edit-btn {
            flex-shrink: 0;
            height: 46.8rpx;
            margin: 0;
            margin-left: 8rpx;
            font-size: 21.6rpx;
            line-height: 46.8rpx;
            color: rgba(255, 255, 255, 1);
            letter-spacing: 0px;
            background: rgba(27, 27, 27, 1);
            border-radius: 239.4rpx;
          }
          .logout-btn {
            flex-shrink: 0;
            height: 46.8rpx;
            margin: 0;
            margin-left: 8rpx;
            font-size: 21.6rpx;
            line-height: 46.8rpx;
            color: black;
            letter-spacing: 0px;
            // background: rgba(27, 27, 27, 1);
            border-radius: 239.4rpx;
          }
        }

        .my-desc {
          display: block;
          margin-top: 8rpx;
          margin-bottom: 12rpx;
          font-size: 24rpx;
          line-height: 31.82rpx;
          color: rgba(27, 27, 27, 1);
        }
        .membership-time {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          font-weight: 500;
          color: rgba(27, 27, 27, 1);
          text {
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
            line-height: 24rpx;
            color: #fff;
            text-align: center;
            background: rgba(27, 27, 27, 1);
            border-radius: 4rpx;
          }
        }
      }
    }
  }

  .my-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .list-content {
      text-align: center;
      .list-content-box {
        position: relative;
        display: inline-block;
        width: 80rpx;
        height: 80rpx;
      }
      .list-content-bg {
        position: absolute;
        top: 6rpx;
        left: 6rpx;
        z-index: 0;
        width: 68rpx;
        height: 68rpx;
        background: #fff;
        border-radius: 20rpx;
      }
      .list-content-img {
        position: relative;
        z-index: 1;
        width: 80rpx;
        height: 80rpx;
      }
      .list-content-name {
        margin-top: 12rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
}
.my-nick-pop {
  padding: 20rpx 28rpx;
  .my-nick-pop-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 600rpx;
    padding-top: 50rpx;
  }
  .my-nick-pop-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    input {
      flex: 1;
      height: 80rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #555;
      border: 2rpx #eee solid;
      border-radius: 10rpx;
    }
  }
  .my-nick-pop-btn {
    display: flex;
    flex-direction: row;
    border-top-color: #f5f5f5;
    border-top-style: solid;
    border-top-width: 2rpx;
    .my-nick-pop-btn-sure {
      color: #2595f3;
      border-left: 2rpx solid #eee;
    }
    button {
      flex: 1;
      background: transparent;
    }
  }
}
</style>
